<template>
  <view class="date-picker">
    <!-- 选择器标题 -->
    <view class="picker-header">
      <view class="btn-cancel" @click="cancel">{{ $t('common.取消') }}</view>
      <view class="btn-confirm" @click="confirm">{{ $t('common.确定') }}</view>
    </view>
    <!-- 年月选择区域 -->
    <view class="picker-body">
      <picker-view :value="pickerValue" @change="onPickerChange">
        <picker-view-column>
          <view v-for="year in yearList" :key="year" class="year-cell">{{ year }}{{ $t('common.年') }}</view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="month in monthList" :key="month" class="month-cell">{{ month }}{{ $t('common.月') }}</view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script name="DatePicker">
  export default {
    data() {
      return {
        yearList: [], // 年份列表
        monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], // 月份列表
        pickerValue: [0, 0], // 选择器当前索引
        selectedYear: new Date().getFullYear(), // 当前选择的年份
        selectedMonth: new Date().getMonth() + 1 // 当前选择的月份
      }
    },
    created() {
      this.initYearList()
      this.setDefaultValue()
    },
    methods: {
      // 初始化年份列表
      initYearList() {
        const startYear = 2000 // 起始年份
        const endYear = new Date().getFullYear() + 10 // 结束年份（当前年份+10）

        for (let year = startYear; year <= endYear; year++) {
          this.yearList.push(year)
        }
      },

      // 设置默认值
      setDefaultValue() {
        const currentYear = new Date().getFullYear()
        const currentMonth = new Date().getMonth() + 1

        this.selectedYear = currentYear
        this.selectedMonth = currentMonth

        // 设置选择器初始索引
        this.pickerValue = [this.yearList.indexOf(currentYear), this.monthList.indexOf(currentMonth)]
      },

      // 选择器值变化
      onPickerChange(e) {
        const val = e.detail.value
        this.pickerValue = val
        this.selectedYear = this.yearList[val[0]]
        this.selectedMonth = this.monthList[val[1]]
      },

      // 确认选择
      confirm() {
        const result = {
          year: this.selectedYear,
          month: this.selectedMonth,
          format: `${this.selectedYear}-${this.selectedMonth.toString().padStart(2, '0')}`
        }

        // 通过事件返回选择结果
        this.$emit('confirm', result)
      },

      // 取消选择
      cancel() {
        this.$emit('cancel')
      }
    }
  }
</script>

<style>
  .date-picker {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 9999;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }

  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
  }

  .picker-title {
    font-size: 18px;

    color: #333;
  }

  .picker-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn-cancel,
  .btn-confirm {
    font-size: 12px;
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    border-radius: 8px;
  }

  .btn-cancel {
    color: #666;
  }

  .btn-confirm {
    color: #31b2b5;
    font-weight: 500;
  }

  .picker-body {
    height: 240px;
    /* padding: 0 80px; */
    display: flex;
    align-items: center;
  }

  picker-view {
    width: 100%;
    height: 200px;
  }

  /* 选择器中间选中条样式 */
  ::v-deep .uni-picker-view-indicator {
    height: 40px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .year-cell {
    display: flex;
    align-items: center;
    padding-left: 80px;
  }
  .month-cell {
    display: flex;
    align-items: center;
    padding-right: 80px;
    align-items: center;
    justify-content: flex-end;
  }
</style>
